<template>
  <div class="container">
    <div class="time_picker">
      <div class="left flex">
        <view>开始:</view>
        <picker mode="date" :value="startDate" start="2000-01-01" :end="finalDate" @change="startDateChange">
          <view class="picker">{{startDate}}</view>
        </picker>
      </div>
      <div class="right flex">
        <view>结束:</view>
        <picker mode="date" :value="endDate" start="2000-01-01" :end="finalDate" @change="endDateChange">
          <view class="picker">{{endDate}}</view>
        </picker>
      </div>
    </div>
    <div class="allfeat">现金总业绩: {{allfeat}}元</div>
    <scroll-view :scroll-y="true" :style="{height: scrollHeight +'px'}">
      <ul v-if="cashyejiList.length != 0">
        <li v-for="item in cashyejiList" :key="item.id" @tap="goto_user(item.id)">
          <div class="left flex-item">
            <span class="user_pic">
              <img :src="item.headurl || 'http://mytimg.178mr.com/myt_default.jpg'" alt>
            </span>
            <div class="user_name">
              <span>{{item.name}}</span>
              <span class="cashyeji">现金业绩: {{item.feat}}元</span>
            </div>
          </div>
        </li>
      </ul>
      <ul v-else>
        <Empty message="没有业绩信息!"></Empty>
      </ul>
    </scroll-view>
  </div>
</template>

<script>
import wx from 'wx'
import api from '@/utils/api'
import Empty from '@/components/empty'
import moment from 'moment'
import Toast from '@/utils/toast'
export default {
  data () {
    return {
      cashyejiList: [],
      scrollHeight: 0,
      allfeat: 0,
      startDate: '',
      endDate: '',
      finalDate: ''
    }
  },
  components: {
    Empty
  },
  async onLoad () {
    moment.locale('zh-cn') // 汉化
    let that = this
    await Promise.all([
      that.gettoday(),
      that.getswiperheight(),
      that.getdongtaixianjintoday()
    ])
  },
  methods: {
    async gettoday () {
      const that = this
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const time = year + '-' + month + '-' + day
      that.startDate = time
      that.endDate = time
      that.finalDate = time;
    },
    async getswiperheight () {
      const that = this
      try {
        const res = wx.getSystemInfoSync()
        that.scrollHeight = res.windowHeight - 90
      } catch (e) {
        console.log(e)
      }
    },
    async getdongtaixianjintoday () {
      const that = this
      const userInfo = wx.getStorageSync('userInfo')
      const startTimejs = moment(that.startDate, 'YYYY-MM-DD').unix()
      const endTimejs = moment(that.endDate, 'YYYY-MM-DD').unix() + 86400
      let paramObj = {
        departmentid: that.$route.query.jsonshop,
        floor: userInfo.floor,
        ismanage: userInfo.ismanage,
        user_id: userInfo.user_id,
        start_time_js: startTimejs,
        end_time_js: endTimejs
      }
      let res = await api.getdongtaixianjintoday(paramObj)
      if (res.code === '100') {
        let allfeat = 0
        res.data.forEach(item => {
          allfeat += item.feat;
        })
        that.cashyejiList = res.data
        that.allfeat = allfeat
      } else {
        that.cashyejiList = ''
      }
    },
    goto_user (id) {
      wx.setStorageSync('params_userid', id)
      this.$router.push({ path: '/pages/worker/checkEmployees/checkEmployees' })
    },
    startDateChange (e) {
      let that = this
      const startTimejs = moment(e.mp.detail.value, 'YYYY-MM-DD').unix()
      const endTimejs = moment(that.endDate, 'YYYY-MM-DD').unix()
      if (startTimejs > endTimejs) {
        Toast('开始时间大于结束时间', 'noicon')
        return false;
      }
      that.startDate = e.mp.detail.value
      that.getdongtaixianjintoday()
    },
    endDateChange (e) {
      const that = this
      const startTimejs = moment(that.startDate, 'YYYY-MM-DD').unix()
      const endTimejs = moment(e.mp.detail.value, 'YYYY-MM-DD').unix()
      if (endTimejs < startTimejs) {
        Toast('结束时间小于开始时间', 'noicon')
        return false;
      }
      that.endDateChange = e.mp.detail.value
      that.getdongtaixianjintoday()
    }
  }
}
</script>

<style scoped>
.container ul {
  background-color: #fff;
}
.time_picker {
  display: flex;
  width: 100%;
  height: 100rpx;
  border-bottom: 4rpx solid #f44444;
  font-size: 32rpx;
  color: #f44444;
  background-color: #fff;
}
.time_picker > div {
  width: 50%;
  height: 100%;
}
li {
  display: flex;
  position: relative;
  height: 128rpx;
  padding-left: 20rpx;
}
li::after {
  position: absolute;
  content: "";
  width: 98%;
  left: 20rpx;
  bottom: 0;
  height: 2rpx;
  background-color: rgba(153, 153, 153, 0.1);
}
li .left {
  display: flex;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
}
li .left .user_pic {
  display: flex;
  align-items: center;
}
li .left .user_name {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  padding-top: 20rpx;
}
li .left .user_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
li .right {
  padding: 20rpx 20rpx 0 0;
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
}
.cashyeji {
  font-size: 30rpx;
  color: rgba(153, 153, 153, 1);
}
.allfeat {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 20rpx;
  font-size: 30rpx;
  color: rgba(53, 53, 53, 1);
  background-color: rgba(153, 153, 153, 0.3);
}
</style>

